<template>
  <a-modal :visible="visible" title="排车" width="85vw" unmount-on-close @cancel="close">
    <div class="h-block">
      <a-descriptions align="right" layout="inline-horizontal">
        <a-descriptions-item label="车型">{{ platoonCarInfo.modelName }}</a-descriptions-item>
        <a-descriptions-item label="车牌号">{{ platoonCarInfo.licenseNo }}</a-descriptions-item>
        <a-descriptions-item label="起始日期">{{ platoonCarInfo.startDate }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <a-divider />
    <!-- 表格 -->
    <table-index :table="table" @loadData="loadData">
      <template #orderInfo="{ record }">
        <div class="order-info-item">自有：{{ record.orderCode }}</div>
        <div class="order-info-item" v-if="record.channelOrderCode">渠道：{{ record.channelOrderCode }}</div>
        <!-- 订单标签 -->
        <div class="order-info-item" v-if="record.orderLabelList && record.orderLabelList.length > 0">
          <tag type="primary" v-for="(item, index) in record.orderLabelList" :key="index">{{ item }}</tag>
        </div>
      </template>
      <!-- 承租人信息 -->
      <template #rentMember="{ record }">
        <div class="link-wrapper">
          <div v-if="record.memberName">{{ record.memberName }}</div>
          <div v-if="record.memberPhone">{{ record.memberPhone }}</div>
        </div>
        <div style="margin-top: 4px" v-if="record.clientName">{{ record.clientName }}</div>
      </template>
      <!-- 车辆信息 -->
      <template #carInfo="{ record }">
        <div class="link-wrapper">
          <!-- 车牌号显示 -->
          <!-- 待排车、待交车 可以进行排车和改排 -->
          <div :class="[![10, 100].includes(record.orderStatus) ? 'no-link' : '']">
            {{ record.orderStatus == 10 ? '未排车' : record.carLicenseNo }}
          </div>
          <!-- 车型名称 -->
          <div>{{ record.carModelName }}</div>
        </div>
      </template>
      <!-- 取还车门店 -->
      <template #pickupReturnStore="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag type="warn" class="tag-pickup">取</tag>
            <div class="flex-1">{{ record.siteName }}</div>
          </div>
          <div class="content-item-tag">
            <tag type="default" size="large">{{ record.sendServiceFlag ? `上门送车: ${record.address}` : '到店取车' }}</tag>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag type="success" class="tag-pickup">还</tag>
            <div class="flex-1">{{ record.returnSiteName }}</div>
          </div>
          <div class="content-item-tag">
            <tag type="default" size="large">{{ record.returnServiceFlag ? `上门取车: ${record.returnAddress}` : '到店还车' }}</tag>
          </div>
        </div>
      </template>
      <!-- 租赁周期 -->
      <template #leaseRange="{ record }">
        <div class="content-item pickup">
          <div class="flex items-start content-item-name">
            <tag type="warn">取</tag>
            <div class="flex-1">{{ record.startTime }}</div>
          </div>
        </div>
        <div class="content-item return">
          <div class="flex items-start content-item-name">
            <tag type="success">还</tag>
            <div class="flex-1">{{ record.endTime }}</div>
          </div>
        </div>
      </template>
    </table-index>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
  <!-- 二次确认 -->
  <a-modal title="提示" v-model:visible="confirmVisible">
    <div v-for="(it, i) in resultMsg" :key="i">{{ it }}</div>
    <div>请确认是否排车？</div>
    <template #footer>
      <a-button @click="confirmVisible = false">关闭</a-button>
      <a-button type="primary" @click="platoonCarFn">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="PlatoonCarModal" lang="ts">
  import { ref, inject } from 'vue'
  import { getPlatoonSOrderList, platoonCarCheck, platoonCar } from '@/api/asset/carStock'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'

  // table 配置
  const table = useTable({
    tableHeight: '60vh',
    columns: [
      { title: '订单信息', dataIndex: 'orderInfo', slotName: 'orderInfo', width: 210 },
      { title: '下单时间', dataIndex: 'orderCreateTime', width: 110 },
      { title: '订单状态', dataIndex: 'orderStatusName', width: 100 },
      { title: '承租人', dataIndex: 'rentMember', slotName: 'rentMember' },
      { title: '车辆信息', dataIndex: 'carInfo', slotName: 'carInfo' },
      { title: '订单来源', dataIndex: 'orderSourceName', width: 100 },
      { title: '取还车门店', dataIndex: 'pickupReturnStore', slotName: 'pickupReturnStore', width: 190 },
      { title: '租赁周期', dataIndex: 'leaseRange', slotName: 'leaseRange', width: 210 },
      { title: '租期', dataIndex: 'rentDays', width: 100 },
    ],
    operates: [
      {
        label: '排车',
        method: (record: any) => {
          activedOrder.value = record
          platoonCarVerify()
        },
      },
    ],
  })

  const visible = ref(false)
  const platoonCarInfo = ref({
    startDate: undefined,
    carId: undefined,
    modelName: undefined,
    licenseNo: undefined,
  })

  // 定义 queryParam
  const queryParam = {
    carModelId: undefined,
    platoonCarId: undefined,
    startTimeBegin: '',
    startTimeEnd: '',
    orderStatusList: [10, 100],
    offlineOrHand: 1, // 线下或者手动订单
  }
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getPlatoonSOrderList)

  const open = (data: any) => {
    platoonCarInfo.value = data
    // 参数
    queryParam.carModelId = data.carModelId
    queryParam.platoonCarId = data.carId
    queryParam.startTimeBegin = data.startDate + ' 00:00:00'
    queryParam.startTimeEnd = data.startDate + ' 23:59:59'

    // 获取数据
    loadData()
    visible.value = true
  }
  // 关闭
  const close = () => {
    visible.value = false
  }

  const loadDataFn = inject('loadDataFn') as Function

  // 排车校验
  const resultMsg = ref([])
  const confirmVisible = ref(false)
  const activedOrder = ref({})
  const platoonCarVerify = () => {
    const record: any = activedOrder.value
    // 仅支持短租订单排车
    const useType = 2
    const params = {
      refId: record.id,
      startTime: record.startTime,
      endTime: record.endTime,
      useType,
      carId: platoonCarInfo.value.carId,
    }
    platoonCarCheck(params).then((res) => {
      const msgList = res.result.resultMsg || []
      if (msgList.length) {
        resultMsg.value = msgList
        confirmVisible.value = true
        return
      }
      platoonCarFn()
    })
  }

  // 排车
  const platoonCarFn = () => {
    const record: any = activedOrder.value
    const useType = record.orderStatus == 10 ? 1 : 2
    const params = {
      id: record.id,
      carId: platoonCarInfo.value.carId,
      carSource: record.carSource,
      type: useType, // 排车
    }
    platoonCar(params).then(() => {
      loadDataFn()
      close()
    })
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .h-block {
    padding-top: 16px;
    padding-left: 16px;
    height: 62px;
    background: rgba(247, 248, 250, 0.5);
  }

  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }

  .link-wrapper {
    font-size: 14px;
    .text-link {
      color: rgb(var(--primary-6));
      cursor: pointer;
      &.no-link {
        color: #1d2129;
        cursor: inherit;
      }
    }
    .text-link + .text-link {
      margin-top: 6px;
    }
  }

  .content-item {
    .content-item-name {
      margin-bottom: 4px;
      .staff-can-click {
        color: rgb(var(--primary-6));
        cursor: pointer;
      }
      .tag-pickup {
        padding: 0 3px;
        line-height: 18px;
      }
      :deep(.custom-tag) {
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
    .content-item-tag :deep(.custom-tag.default) {
      line-height: 20px;
      padding: 4px 8px;
    }
  }
  .content-item + .content-item {
    margin-top: 10px;
  }
</style>
